<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card">

    <div class="layui-card-body padding-left-40">
        <fieldset class="layui-bg-gray">
            <legend><span class="layui-badge think-bg-violet">是否支付</span></legend>
            <div>
                {foreach ['未支付','已支付'] as $k => $v}
                {if (isset($vo.payment_status) and $vo.payment_status eq $k) or (empty($vo.payment_status) and $k eq 0)}
                <input checked name="payment_status" title="{$v}" type="radio" value="{$k}">
                {else}
                <input name="payment_status" title="{$v}" type="radio" value="{$k}">
                {/if}{/foreach}
            </div>
        </fieldset>

        <label class="layui-form-item block relative">
            <span class="color-green font-w7 label-required-prev">公证处</span>
            <span class="color-desc margin-left-5"></span>
            <select class="layui-select" lay-search name="notarial_office_id" id="notarial_office_id" lay-filter="notarial_office_id">
                {foreach $Offices as $cate}
                    <option  value="{$cate.id}">{$cate.name|default=''}</option>
                {/foreach}
            </select>
        </label>

        <div class="layui-form-item label-required-prev">
            <span class="help-label"><b>公证书</b></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="nowrap text-center">公证事项</th>
                    <th class="nowrap text-center">公证类型</th>
                    <th class="nowrap text-center">公证书份数</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                    <td class="padding-0 text-center">
                        <select class='layui-select' name='base_type' lay-search lay-filter="matter" id="matter">
                            {foreach ['委托公证','出生公证','亲属关系公正'] as $k=>$v}
                            {if isset($vo.type) && $vo.type eq $k}
                            <option selected value='{$k}'>{$v}</option>
                            {else}
                            <option value='{$k}'>{$v}</option>
                            {/if}{/foreach}
                        </select>
                    </td>
                    <td class="padding-0 text-center">
                        <select class='layui-select' name='matter_id' lay-search id="matter_id" lay-filter="matter_id" >

                        </select>
                    </td>
                    <td class="text-center text-top padding-0">
                        <input class="layui-input" type="number" min="1" data-blur-number="0" name="number_goods" placeholder="请输入商品限购数量" value="{$vo.number_goods|default=1}">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-form-item label-required-prev">
            <span class="help-label"><b>委托人信息</b><button type="button" class="layui-btn addBtn">新增</button></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="nowrap text-center">姓名</th>
                    <th class="nowrap text-center">联系电话</th>
                    <th class="nowrap text-center">委托人身份证正面</th>
                    <th class="nowrap text-center">委托人身份证反面</th>
                    <th class="nowrap text-center">委托人户口本图片</th>
                </tr>
                </thead>
                <tbody id="hahaha">
                <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                    <td class="padding-0 text-center">
                        <input class="layui-input text-center padding-left-0 border-0" name="client_name[]" required value='{$vo.client_name|default=""}'>
                    </td>
                    <td class="padding-0 text-center">
                        <input class="layui-input text-center padding-left-0 border-0" name="client_phone[]" required value='{$vo.client_phone|default=""}'>
                    </td>
                    <td class="text-center text-top padding-0">
                        <div class="help-images">
                            <input name="client_front_of_id_card[]" type="hidden" value="{$vo.client_front_of_id_card|default=''}">
                            <script>$('[name="client_front_of_id_card[]"]').uploadOneImage();</script>
                        </div>
                    </td>
                    <td class="text-center text-top padding-0">
                        <div class="help-images">
                            <input name="client_reverse_side_of_id_card[]" type="hidden" value="{$vo.client_reverse_side_of_id_card|default=''}">
                            <script>$('[name="client_reverse_side_of_id_card[]"]').uploadOneImage();</script>
                        </div>
                    </td>
                    <td class="text-center text-top padding-0">
                        <div class="help-images">
                            <input name="client_household_register[]" type="hidden" value="{$vo.client_household_register|default=''}">
                            <script>$('[name="client_household_register[]"]').uploadOneImage();</script>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div id="proof_of_relationship">
            <span class="help-label"><b>关系证明</b></span>
            <fieldset class="layui-form-item">
                <div class="help-images">
                    <input name="proof_of_relationship" type="hidden" value="">
                    <script>$('[name="proof_of_relationship"]').uploadOneImage();</script>
                </div>
            </fieldset>
        </div>
        <div class="layui-form-item">
            <span class="help-label"><b>婚姻状况</b></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="nowrap text-center">婚姻状况</th>
                    <th class="nowrap text-center">结婚证</th>
                    <th class="nowrap text-center">离婚证</th>
                    <th class="nowrap text-center">离婚协议</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                    <td class="padding-0 text-center">
                        {foreach ['未婚','已婚','离异'] as $k => $v}
                        <input name="client_marital_status" title="{$v}" type="radio" value="{$k}">
                        {/foreach}
                    </td>
                    <td class="padding-0 text-center">
                        <div class="help-images">
                            <input name="client_marriage_certificate" type="hidden" value="{$vo.client_marriage_certificate|default=''}">
                            <script>$('[name="client_marriage_certificate"]').uploadOneImage();</script>
                        </div>
                    </td>
                    <td class="padding-0 text-center">
                        <div class="help-images">
                            <input name="client_divorce_certificate" type="hidden" value="{$vo.client_divorce_certificate|default=''}">
                            <script>$('[name="client_divorce_certificate"]').uploadOneImage();</script>
                        </div>
                    </td>
                    <td class="padding-0 text-center">
                        <div class="help-images">
                            <input name="client_divorce_agreement" type="hidden" value="">
                            <script>$('[name="client_divorce_agreement"]').uploadMultipleImage();</script>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div id="entrusted_notarization">
            <span class="help-label"><b>房产证</b></span>
            <fieldset class="layui-form-item">
                <div class="help-images">
                    <input name="client_property_ownership_certificate" type="hidden" value="{$vo.client_property_ownership_certificate|default=''}">
                    <script>$('[name="client_property_ownership_certificate"]').uploadOneImage();</script>
                </div>
            </fieldset>
            <span class="help-label"><b>购房协议</b></span>
            <fieldset class="layui-form-item">
                <div class="help-images">
                    <input name="client_house_purchase_agreement" type="hidden" value="">
                    <script>$('[name="client_house_purchase_agreement"]').uploadMultipleImage();</script>
                </div>
            </fieldset>
            <span class="help-label"><b>房产信息查询(产调)</b></span>
            <fieldset class="layui-form-item">
                <div class="help-images">
                    <input name="client_property_information" type="hidden" value="">
                    <script>$('[name="client_property_information"]').uploadMultipleImage();</script>
                </div>
            </fieldset>
            <span class="help-label"><b>受托人</b></span><button type="button" class="layui-btn addBtn1">新增</button></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="nowrap text-center">受托人身份证正面</th>
                    <th class="nowrap text-center">受托人身份证反面</th>
                </tr>
                </thead>
                <tbody id="hahaha1">
                <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                    <td class="text-center text-top padding-0">
                        <div class="help-images">
                            <input name="trustee_id_card_z[]" type="hidden" value="">
                            <script>$('[name="trustee_id_card_z[]"]').uploadOneImage();</script>
                        </div>
                    </td>
                    <td class="text-center text-top padding-0">
                        <div class="help-images">
                            <input name="trustee_id_card_f[]" type="hidden" value="">
                            <script>$('[name="trustee_id_card_f[]"]').uploadOneImage();</script>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--<fieldset class="layui-form-item">-->
            <!--    <td class="text-left padding-0">-->
            <!--        <div class="help-images">-->
            <!--            <input name="trustee_id_card[]" type="hidden" value="">-->
            <!--            <script>$('[name="trustee_id_card"]').uploadMultipleImage();</script>-->
            <!--        </div>-->
            <!--    </td>-->
            <!--</fieldset>-->
        </div>
        <div id="parental_information">
            <div class="layui-form-item">
                <span class="help-label"><b>父母身份证</b></span>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th class="nowrap text-center">父亲身份证正面</th>
                        <th class="nowrap text-center">父亲身份证反面</th>
                        <th class="nowrap text-center">母亲身份证正面</th>
                        <th class="nowrap text-center">母亲身份证反面</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-if="item.city.length > 0" ng-repeat="item in rules">
                        <td class="padding-0 text-center">
                            <div class="help-images">
                                <input name="front_of_fathers_id_card" type="hidden" value="{$vo.front_of_fathers_id_card|default=''}">
                                <script>$('[name="front_of_fathers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div class="help-images">
                                <input name="reverse_side_of_fathers_id_card" type="hidden" value="{$vo.reverse_side_of_fathers_id_card|default=''}">
                                <script>$('[name="reverse_side_of_fathers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div class="help-images">
                                <input name="front_of_mothers_id_card" type="hidden" value="{$vo.front_of_mothers_id_card|default=''}">
                                <script>$('[name="front_of_mothers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                        <td class="padding-0 text-center">
                            <div class="help-images">
                                <input name="reverse_side_of_mothers_id_card" type="hidden" value="{$vo.reverse_side_of_mothers_id_card|default=''}">
                                <script>$('[name="reverse_side_of_mothers_id_card"]').uploadOneImage();</script>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <span class="help-label"><b>父母户口本</b></span>
            <fieldset class="layui-form-item">
                <div class="help-images">
                    <input name="parents_household_register" type="hidden" value="{$vo.parents_household_register|default=''}">
                    <script>$('[name="parents_household_register"]').uploadOneImage();</script>
                </div>
            </fieldset>
        </div>

        <span class="help-label"><b>其他</b></span>
        <fieldset class="layui-form-item">
            <div class="help-images">
                <input name="other" type="hidden" value="">
                <script>$('[name="other"]').uploadMultipleImage();</script>
            </div>
        </fieldset>

        <div class="layui-form-item video_forensics_div">
            <span class="color-green font-w7">视频取证</span>
            <div class="layui-input-block" style='margin-left: 0;'>
                <div class="layui-form-item">
                  <input type="checkbox" name="video_forensics" lay-skin="switch" lay-text="开启|关闭" checked value="1">
                </div>
            </div>
        </div>
        <div class="layui-form-item proxy_statement_div">
            <span class="color-green font-w7 label-required-prev">委托书</span>
            <span class="color-desc margin-left-5"></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="text-center" style="width:90px">委托书</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="proxy_statement" placeholder="请输入委托书">{$vo.proxy_statement|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-form-item read_agreement_div">
            <span class="color-green font-w7 label-required-prev">阅读协议</span>
            <span class="color-desc margin-left-5"></span>
            <table class="layui-table">
                <thead>
                <tr>
                    <th class="text-center" style="width:90px">送达回证</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement1" placeholder="请输入送达回证">{$vo.read_agreement1|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">询问记录</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement2" placeholder="请输入询问记录">{$vo.read_agreement2|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">涉外民事类公证告知书</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement3" placeholder="请输入涉外民事类公证告知书">{$vo.read_agreement3|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">公证受理通知单回执</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement4" placeholder="请输入公证受理通知单回执">{$vo.read_agreement4|default=''}</textarea>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="text-center" style="width:90px">公证处公证申请表</th>
                </tr>
                <tr>
                    <th>
                        <div class="relative block">
                            <textarea class="layui-hide" name="read_agreement5" placeholder="请输入公证处公证申请表">{$vo.read_agreement5|default=''}</textarea>
                        </div>
                    </th>
                </tr>



                </thead>
            </table>
        </div>

        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" data-close data-confirm="确定要取消吗？" type='button'>取消编辑</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form'], function () {
        var form = layui.form
            , $ = layui.$;

        //动态添加tr
        $(".addBtn").click(function () {
            var client_front_of_id_card = "<script>$('[name=\"client_front_of_id_card[]\"]').uploadOneImage()<\/script>";
            var client_reverse_side_of_id_card = "<script>$('[name=\"client_reverse_side_of_id_card[]\"]').uploadOneImage();<\/script>";
            var client_household_register = "<script>$('[name=\"client_household_register[]\"]').uploadOneImage();<\/script>";
            var str = '<tr ng-if="item.city.length > 0" ng-repeat="item in rules"><td class="padding-0 text-center"><input class="layui-input text-center padding-left-0 border-0" name="client_name[]" required value=""></td>' +
                '<td class="padding-0 text-center"><input class="layui-input text-center padding-left-0 border-0" name="client_phone[]" required value=""></td>'+
                '<td class="text-center text-top padding-0"><div class="help-images"><input name="client_front_of_id_card[]" type="hidden" value="">'+client_front_of_id_card+'</div></td>'+
                '<td class="text-center text-top padding-0"><div class="help-images"><input name="client_reverse_side_of_id_card[]" type="hidden" value="">'+client_reverse_side_of_id_card+'</div></td>'+
                '<td class="text-center text-top padding-0"><div class="help-images"><input name="client_household_register[]" type="hidden" value="">'+client_household_register+'</div></td>';
            $("#hahaha").append(str);
        });

        $(".addBtn1").click(function () {
            var client_front_of_id_card = "<script>$('[name=\"trustee_id_card_z[]\"]').uploadOneImage()<\/script>";
            var client_reverse_side_of_id_card = "<script>$('[name=\"trustee_id_card_f[]\"]').uploadOneImage();<\/script>";
            var str = '<tr ng-if="item.city.length > 0" ng-repeat="item in rules">' +
                '<td class="text-center text-top padding-0"><div class="help-images"><input name="trustee_id_card_z[]" type="hidden" value="">'+client_front_of_id_card+'</div></td>'+
                '<td class="text-center text-top padding-0"><div class="help-images"><input name="trustee_id_card_f[]" type="hidden" value="">'+client_reverse_side_of_id_card+'</div></td>'
            $("#hahaha1").append(str);
        });



        // 不同公证事项显示不同的表单
        $(function(){
            var selectedOption = $("#matter").find("option:selected").val(); //value值
            if (selectedOption == 0) {
                $(".addBtn").show();
                $("#proof_of_relationship").hide(); //关系证明
                $("#entrusted_notarization").show(); //房产
                $("#parental_information").hide(); //父母
            } else if (selectedOption == 1) {
                $(".addBtn").hide();
                $("#proof_of_relationship").hide();
                $("#entrusted_notarization").hide();
                $("#parental_information").show(); //父母
            } else {
                $(".addBtn").hide();
                $("#proof_of_relationship").show();
                $("#entrusted_notarization").hide();
                $("#parental_information").show(); //父母
            }
        });
        form.on("select(matter)", function (data) {
            if (data.value == 0) {
                $(".addBtn").show();
                $("#proof_of_relationship").hide(); //关系证明
                $("#entrusted_notarization").show(); //房产
                $("#parental_information").hide(); //父母
                //委托书
                $(".proxy_statement_div").show(); //委托书
            } else if (data.value == 1) {
                $(".addBtn").hide();
                $("#proof_of_relationship").hide();
                $("#entrusted_notarization").hide();
                $("#parental_information").show(); //父母
                //委托书
                $(".proxy_statement_div").hide(); //委托书
            } else {
                $(".addBtn").hide();
                $("#proof_of_relationship").show();
                $("#entrusted_notarization").hide();
                $("#parental_information").show(); //父母
                //委托书
                $(".proxy_statement_div").hide(); //委托书
            }

            // 二级联动
            let notarial_office_id = $("#notarial_office_id").val()
            postData = {'matter': data.value,'notarial_office_id':notarial_office_id};
            url = "{:url('linkage')}";
            $.post(url, postData, function (result) {
                //将信息填充到html中
                html = "";
                $(result).each(function (i) {
                    html += "<option value='" + this.id + "'>" + this.name + "</option>";
                });
                $('#matter_id').html(html);
                form.render();
            }, 'json')
        });
        layui.form.render();
        $("#matter").next().find('.layui-this').trigger('click')
        console.log($("#notarial_office_id").next().find('dd'))
        form.on("select(notarial_office_id)", function (data) {
            $("#matter").next().find('.layui-this').trigger('click')
        })

        require(['ckeditor'], function () {
            window.createEditor('[name=proxy_statement]', {height: 350})
            window.createEditor('[name=read_agreement1]', {height: 350})
            window.createEditor('[name=read_agreement2]', {height: 350})
            window.createEditor('[name=read_agreement3]', {height: 350})
            window.createEditor('[name=read_agreement4]', {height: 350})
            window.createEditor('[name=read_agreement5]', {height: 350})
        });

    })
</script>